<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hashtable</title>
    <style>
        div{
            margin-top:10px;
        }
        html {
            font-size:12px;
        }
    </style>
</head>
<body>
<div>
    <label for="capacity">capacity </label><input type="text" id="capacity" value="10" placeholder="请输入容量">
    <input type="button" value="init" id="initBtn">
</div>
<div>
    <label for="key">key </label><input type="text" id="key" placeholder="请输入value 以,分隔">
    <label for="index">index </label><input type="text" id="index" placeholder="-1 表示尾添加" value="-1">
</div>
<div>
    <input type="button" value="add" id="addBtn">
    <input type="button" value="remove" id="removeBtn">
    <input type="button" value="clear" id="clearBtn">

</div>
<div id="canvasDiv">
    <canvas id="canvas" width="1024" height="400"></canvas>
</div>
<script>
    document.getElementById("initBtn").onclick = function(){
        let capacity = document.getElementById("capacity").value;
        let url = `http://localhost:8080/arraylist/init?capacity=${capacity}`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }
    document.getElementById("clearBtn").onclick = function(){
        let url = `http://localhost:8080/arraylist/clear`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }
    document.getElementById("removeBtn").onclick = function(){
        let key = document.getElementById("key").value;
        let url = `http://localhost:8080/arraylist/remove?key=${key}`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }
    document.getElementById("addBtn").onclick = function(){
        let key = document.getElementById("key").value;
        let index = document.getElementById("index").value;
        let url = `http://localhost:8080/arraylist/add?key=${key}&index=${index}`;
        fetch(url).then(r=>r.json()).then(json=>{
            loadData();
        });
    }

    function drawList(list,bWidth,bHeight,xBegin,yBegin) {
        var pointSize = 8;
        let length = list.length;
        let tableCells = [];
        for(let i = 0; i < length; i++) {
            let x = xBegin + i*(bWidth + 2);
            let y = yBegin ;
            tableCells.push({x, yBegin});
            ctx.fillStyle="yellow";
            ctx.fillRect(x,yBegin,bWidth,bHeight);

            ctx.fillStyle="black";
            //ctx.font="14px Georgia";
            ctx.font = "bold 12px Arial";
            ctx.fillText(i,x+bWidth/2-5,y+bHeight/2+4);
        }

        for(let i = 0; i < length; i++) {
            let x = tableCells[i].x;
            let y = yBegin + bHeight + 2;
            let node = list[i];
            if(node!=null) {
                ctx.beginPath();
                ctx.fillStyle = "green";
                ctx.arc(x+pointSize, y+pointSize, pointSize, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                ctx.fill();
                ctx.closePath();

                ctx.fillStyle = "white";
                ctx.font = "bold 10px Arial";
                ctx.fillText(node,x+bWidth/2-5,y+bHeight/2+4);
            } else {
                ctx.beginPath();
                ctx.fillStyle = "pink";
                ctx.arc(x+pointSize, y+pointSize, pointSize, (Math.PI / 180) * 0, (Math.PI / 180) * 360, false);
                ctx.fill();
                ctx.closePath();
            }
        }
    }
    let canvas = document.getElementById("canvas");
    let ctx = canvas.getContext("2d");

    function loadData() {
        fetch("http://localhost:8080/arraylist/all").then(r=>r.json()).then(data=>{
            const heightUnit = 100;
            canvas.width = data.all.length * (18 + 2);
            let details = data.details;
            if(details) {
                canvas.height = 300+(details.length)*heightUnit;
            }
            drawList(data.all, 18,15,0,0);

            if(details) {
                for(let i = 0; i < details.length; i++) {
                    let d = details[i];
                    drawList(d, 18,15,0,100+(i+1)*heightUnit);
                }
            }
        });
    }
    loadData();

</script>
</body>
</html>